
<template >
  <div>
      <div class="headstyle">
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                <span class="locsty"><i class="el-icon-location iconsty"></i>当前位置：学生数据统计</span>
                </div>
            </el-col>
            <el-col :span="12">  
                <div class="block">
                  <span class="demonstration"></span>
                      <el-date-picker
                        v-model="value2"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                      </el-date-picker>
                  <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
              </div>
            </el-col>  
              <el-col :span="6" align="center">
                  <el-button type="primary" @click="exportData">导出Excel</el-button>
              </el-col>         
          </el-row>
      </div>
      <div class="contentstyle" >
          <el-table class="index-table-style"
          :data="tableData"
          height="500px"
          style="width: 100%"
          :cell-style="tableRowStyle"
          @row-click="OpenDetails"
          :header-cell-style="{
            'background':'#e6f3f8',
            'font-weight':'800',
            'color':'black',
          }">
            <el-table-column
              prop="id"
              label="序号"
            align="center">
            </el-table-column>
            <el-table-column
              prop="Te_name"
              label="导师姓名"
              align="center">
            </el-table-column>
            <el-table-column
              prop="Te_Number"
              label="导师工号"
              align="center">
              <template slot-scope="scope">
              <el-button round style="border-color: #527bf2;color:#527bf2;padding:5px 10px;">{{scope.row.Te_Number}}</el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="Te_depart"
              label="部门"
              align="center">
            </el-table-column>
            <el-table-column
              prop="Dt_time"
              label="培训时间"
              align="center">
            </el-table-column>
            <el-table-column
              prop="Dt_TimeEnd"
              label="结束时间"
              align="center">
            </el-table-column>
            <el-table-column
              prop="Dt_Flag"
              label="当前状态"
              align="center">
            </el-table-column>
        </el-table>
        <el-pagination
                          v-if = "paginationShow"
                          @current-change="currentChange"
                          @size-change="sizeChange"
                          :current-page="currentPage"
                          :page-size="pageSize"
                          layout="total, prev, pager, next, jumper"
                          :total="total"
                  ></el-pagination>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 页容量
      pageSize: 15,
      // 当前页
      currentPage: 1,
      // 数据的总条数
      total: 0,
      // 控制分页的显示隐藏达到刷新的效果
      paginationShow: true,

      tableData: [],
      options: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value2: "",
      value: ""
    };
  },

  mounted: function() {
    this.search();
  },

  methods: {
    tableRowStyle({ row, rowIndex }) {
      return "padding:5px 0;";
    },

    search() {
      if (this.value2 == null) {
        this.value2 = "";
      }
      this.$axios
        .get("/admin/Getpagelist", {
          params: {
            page: this.currentPage,
            pageSize: this.pageSize,
            starttime: this.value2[0],
            endtime: this.value2[1]
          }
        })
        .then(json => {
          if (json.data == "logout") {
            this.$message({
              type: "info",
              message: "您的登录信息已失效，请重新登录！"
            });
            this.$router.push("/login");
          } else {
            this.tableData = JSON.parse(json.data.List);
            this.total = JSON.parse(json.data.totalnum);
          }
        });
    },
    // 当页容量发生变化时触发
    sizeChange(size) {
      this.pageSize = size;
      // 重新请求数据
      this.search();
    },
    // 当页数发生变化时触发
    currentChange(num) {
      this.currentPage = num;
      // 重新请求数据
      this.search();
    },
    // 查询方法
    searchClicks() {
      this.paginationShow = false;
      this.currentChange(1);
      this.$nextTick(() => {
        this.paginationShow = true;
        this.search();
      });
    },
    OpenDetails(row, column, event) {

      var Dt_Id = row.Dt_Id;     
      this.$router.push({
        name: "stdtldata",
        params: { Dt_Id }
      });
    },

    exportData() {        
        this.$axios
          .get("/admin/btnExportDataTrain",{ params: {          
            starttime: this.value2[0],
            endtime: this.value2[1]
          }
          })
          .then(res => {
            if(res.data=="logout"){
               this.$message({
                  type: "info",
                  message: "您的登录信息已失效，请重新登录！"
                });
                this.$router.push("/login");
            }else{
                if(res.data=="nodata"){
                  this.$message({
                    type: "info",
                    message: "数据为空，无法导出！"
                  });
                }else{
                  var url = res.data;
                  location.href = this.$store.state.respath+url;
                }
            }
          })
          .catch(function(error) {});         
      }
  },

  computed: {
    totalNum() {
      return this.total;
    }
  },
  watch: {
    // 监听总条数,每次查询将当前页置为 1
    totalNum(val) {
      if (val == (this.currentPage - 1) * this.pageSize && val != 0) {
        this.currentPage -= 1;
        this.search(this);
      }
    }
  }
};
</script>

<style scoped>
.closesty {
  float: right;
  font-size: 27px;
  line-height: 40px;
}
.locsty {
  font-size: 16px;
  font-family: "Microsoft YaHei";
}
.editsty {
  padding: 3px;
  font-size: large;
}
.iconsty {
  color: #53b9fe;
  font-size: 22px;
}
.headstyle {
  border-bottom: 2px solid #e5e5e5;
  padding-bottom: 20px;
}
.contentstyle {
  text-align: center;
  width: 90%;
  padding: 40px;
}
.title {
  margin: 0 0 20px;
  border-bottom: 1px solid #ddd;
  padding: 14px 0;
  background-color: #fff;
}
</style>

